<template>
  <div class="article-container">
    <el-card class="box-card">
      <el-button type="primary" @click="dialogVisible = true" >添加一级类目</el-button >
      <el-button type="danger" @click="deleteClick">批量删除</el-button>
      <!-- 表格 -->
      <el-table
        :data="categoryList"
        style="width: 100%"
        stripe
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children' }"
        lazy
        @selection-change="handleSelectionChange"
        >>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="类目名称"> </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" align="center">
        </el-table-column>
        <el-table-column label="状态" width="80" align="center">
          <template v-slot="slot">
            <el-tag type="success" v-if="slot.row.status">显示</el-tag>
            <el-tag v-else>隐藏</el-tag>
          </template>
        </el-table-column>

        <el-table-column  label="操作" align="center">
          <template v-slot="slot">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="addClickLevel(slot.row.id)"
              >添加下级类目</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="editClick(slot.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="deleteClick(slot.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        @close="close"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="类目名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="类目状态">
            <el-switch
              v-model="form.status"
              active-text="显示"
              inactive-text="隐藏"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible=false">取 消</el-button>
          <el-button type="primary" @click="addClick">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { toTree } from "@/utils";
import {
  getCategoryList,
  deleteCategory,
  addCategory,
  editCategory
} from "@/api/admin/mall_Category";
export default {
  name: "GoodsCategory",
  components: {  },
  data() {
    return {
      dialogVisible: false,
      categoryList: [], // 文章表格数据
      queryInfo: {
        query: "", // 查询参数
        pageNum: 1, // 分页页码
        pageSize: 10, // 页面数据条数
      },
      total: 0,
      selectRows: [], // 全选数据
      title: "新增类目",
      form: {
        name: "",
        parentId: 0,
        status: true,
      },
      optionProps: {
        value: "id",
        label: "name",
        children: "children",
        expandTrigger: "hover",
        checkStrictly: true,
        emitPath: false,
      },
    };
  },
  created() {
    this.getCategoryList();
  },
  methods: {
    // 文章表格数据
    async getCategoryList() {
      const { list, pageNum, pageSize, total } = await getCategoryList(
        this.queryInfo
      );
      this.categoryList = toTree(list);
      this.queryInfo.pageNum = Number(pageNum);
      this.queryInfo.pageSize = Number(pageSize);
      this.total = total;
    },
    // 设置页面数据条数
    handleSizeChange(val) {
      this.queryInfo.pageSize = val;
      this.getCategoryList();
    },
    // 设置分页页码
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val;
      this.getCategoryList();
    },
    // 添加下级类目
    addClickLevel(id) {
      this.form.parentId = id;
      this.dialogVisible = true;
    },
    // 编辑
    editClick(row) {
       this.title = '编辑类目'
       this.form = {
        id: row.id,
        name: row.name,
        parentId: row.parentId,
        status: row.status,
      };
       this.dialogVisible =true
    },
    // 添加类目
    async addClick() {
      if(this.form.id){
        await editCategory(this.form.id,this.form)
      }else{
        await addCategory(this.form);
        this.form = {
          name: "",
          parentId: 0,
          status: true,
        };
      }
      this.$message.success(`${this.form.id ? '修改' : '添加'}类目${this.form.name}成功`);
      this.dialogVisible = false;
      this.getCategoryList();
    },
    // 关闭弹出框
    handleClose(done) {
      done();
    },
    close(){
      this.title = '新增类目'
      this.form = {
        name: "",
        parentId: 0,
        status: true,
      };
    },
    // 删除用户
    deleteClick(row) {
      if (row.id) {
        this.$confirm("你确定要删除选中项吗", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            await deleteCategory({ ids: [row.id] });
            this.getCategoryList();
            this.$message.success("删除成功");
          })
          .catch(() => {
            this.$message.info("已取消删除");
          });
      } else {
        // 批量删除
        if (!this.selectRows.length)
          return this.$message.warning("请选择要删除的选中项");
        const ids = this.selectRows.map((item) => item.id);
        this.$confirm("你确定要删除选中项吗", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            await deleteCategory({ ids });
            this.getCategoryList();
            this.$message.success("删除成功");
          })
          .catch(() => {
            this.$message.info("已取消删除");
          });
      }
    },
    // 全选数据
    handleSelectionChange(val) {
      this.selectRows = val;
    },
  },
};
</script>

<style lang="scss">
.el-select .el-input {
  width: 80px;
}
.box-card {
  margin: 20px;
}
.el-table {
  margin: 20px 0px;
}
.el-image {
  border-radius: 5px;
}
</style>
